<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!doctype html>
<html lang="zh-CN">
<head>
<meta content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" name="viewport" />
<meta charset="utf-8">
<title>我的里程清单</title>
<script type="text/javascript" src="./js/flexible.js"></script>
<style>
*{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
	color: #FFF;
}
.clearfix:before,.clearfix:after {
	display: table;
	content: " ";
	line-height: 0;
	width: 100%;
	visibility: hidden;
}

.clearfix:after {
	clear: both;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
.backBar {
	width:100%;
	height: 50px;
}

.backBar table {
	width: 100%;
	height: 50px;
	background-color: #2cc3ac;
	font-size: 20px;
	color: #fdfcfc;
}

.backBar table td {
	text-align: center;
}

.backBar a {
	display: inline-block;
	width: 100%;	
	height: 100%;
	line-height: 50px;
	text-decoration: none;
}
.flex {
	display: flex;
}
.flex-1 {
	flex: 1;
}
.jc-space-between {
	justify-content: space-between;
}
.bill-tab {
	background: #eceded;
	color: #2cc3ac;
	height: 1.12rem;
	line-height: 1.12rem;
	text-align: center;
	font-size: 18px;
}
.bill-content {
	margin: 0.4rem 0.48rem;
}
.exchange-con,
.current-mileage {
	font-size: 16px;
	color: #555;
}
.exchange-time,
.exchange-use {
	font-size: 14px;
	color: #a1a1a1;
}
.left-con {
	text-align: left;
}
.right-con {
	text-align: right;
}
</style>
</head>
<body>
<c:if test="${param.device==null ||param.device=='' }">
<div class="backBar">
	<table>
		<tbody>
			<tr>
				<td style="width: 50px;">
					<a class="btn-exit" href="dragon_boat_festival.htm?device=${param.device}&app_token=${param.app_token}">ㄑ</a>
				</td>
				<td>我的里程清单</td>
				<td style="width: 50px;"></td>
			</tr>
		</tbody>
	</table>
</div>
</c:if>
<div class="flex bill-tab">
	<div class="flex-1">项目描述</div>
	<div class="flex-1">当前里程数</div>
</div>
<c:choose>
	<c:when test="${vcoinList != null && fn:length(vcoinList) > 0 }">
		<c:forEach items="${vcoinList }" var="vcoin">
			<div class="flex bill-content jc-space-between">
				<div class="left-con">
					<p class="exchange-con"><c:choose><c:when test="${fn:length(vcoin.summary)>7 }">${fn:substring(vcoin.summary, 7, fn:length(vcoin.summary))}</c:when><c:otherwise>${vcoin.summary }</c:otherwise> </c:choose></p>
					<p class="exchange-time"><c:choose><c:when test="${vcoin.gmtCreate != null && vcoin.gmtCreate != '' }"><fmt:formatDate value="${vcoin.gmtCreate }" pattern="yyyy/MM/dd HH:mm"/></c:when><c:otherwise>2017/01/01 00:00</c:otherwise></c:choose></p>
				</div>
				<div class="right-con">
					<p class="current-mileage"><c:choose><c:when test="${vcoin.balance >= 0 }">${vcoin.balance }</c:when><c:otherwise>0</c:otherwise></c:choose></p>
					<p class="exchange-use"><c:choose><c:when test="${vcoin.dr > 0 }">+${vcoin.dr }</c:when><c:when test="${vcoin.cr > 0 }">-${vcoin.cr }</c:when><c:otherwise>0</c:otherwise></c:choose></p>
				</div>
			</div>
		</c:forEach>
	</c:when>
	<c:otherwise>
		<div style="font-size: 18px;color: #555;text-align: center; padding:20px 0;">
			您还没有启航哦，<br/>赶快带上小伙伴们出发吧!
		</div>
	</c:otherwise>
</c:choose>
</body>
</html>